ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ದೃಢವಾದ ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್: ಹೂಕ್ಸ್‌ನೊಂದಿಗೆ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವುದು

ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ರಿಸೋರ್ಸ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು ಸಾಮಾನ್ಯ ಅಭ್ಯಾಸವಾಗಿದೆ. ಅದು ಎಪಿಐನಿಂದ ಡೇಟಾ ಪಡೆಯುವುದಾಗಿರಲಿ, ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದಾಗಿರಲಿ ಅಥವಾ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುವುದಾಗಿರಲಿ, ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ಸಮಯದಲ್ಲಿ ಸಂಭವನೀಯ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸುವುದು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಎರರ್ ಬೌಂಡರಿಗಳು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿಯಾದರೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳನ್ನು ಹಿಡಿಯಲು, ಆ ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡಲು ಮತ್ತು ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವ ಬದಲು ಫಾಲ್‌ಬ್ಯಾಕ್ ಯುಐ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಒಂದು ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಲೇಖನವು ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು ರಿಯಾಕ್ಟ್ ಹೂಕ್ಸ್ ಜೊತೆಯಲ್ಲಿ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ.

ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ರಿಯಾಕ್ಟ್ 16 ಕ್ಕಿಂತ ಮೊದಲು, ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ಸಮಯದಲ್ಲಿ ನಿಭಾಯಿಸದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ದೋಷಗಳು ರಿಯಾಕ್ಟ್‌ನ ಆಂತರಿಕ ಸ್ಥಿತಿಯನ್ನು ಹಾಳುಮಾಡುತ್ತಿದ್ದವು ಮತ್ತು ನಂತರದ ರೆಂಡರ್‌ಗಳಲ್ಲಿ ಗೂಢಾರ್ಥದ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತಿದ್ದವು. ಎರರ್ ಬೌಂಡರಿಗಳು ತಮ್ಮ ಚೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಸಂಭವಿಸುವ ದೋಷಗಳಿಗೆ ಕ್ಯಾಚ್-ಆಲ್ ಬ್ಲಾಕ್‌ಗಳಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮೂಲಕ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಅವು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಾಗಿದ್ದು, ಈ ಕೆಳಗಿನ ಒಂದು ಅಥವಾ ಎರಡೂ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತವೆ:

• static getDerivedStateFromError(error): ಈ ಸ್ಟ್ಯಾಟಿಕ್ ಮೆಥಡ್ ಅನ್ನು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಎಸೆದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಎಸೆದ ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು ಮೌಲ್ಯವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ.
• componentDidCatch(error, info): ಈ ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್ ಅನ್ನು ಡಿಸೆಂಡೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ದೋಷವನ್ನು ಎಸೆದ ನಂತರ ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಎಸೆದ ದೋಷವನ್ನು ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ, ಜೊತೆಗೆ ಯಾವ ಕಾಂಪೊನೆಂಟ್ ದೋಷವನ್ನು ಎಸೆದಿದೆ ಎಂಬ ಮಾಹಿತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸಹ ಸ್ವೀಕರಿಸುತ್ತದೆ. ದೋಷದ ಮಾಹಿತಿಯನ್ನು ಲಾಗ್ ಮಾಡಲು ನೀವು ಇದನ್ನು ಬಳಸಬಹುದು.

ಮುಖ್ಯವಾಗಿ, ಎರರ್ ಬೌಂಡರಿಗಳು ಅವುಗಳ ಕೆಳಗಿರುವ ಸಂಪೂರ್ಣ ಟ್ರೀಯ ರೆಂಡರಿಂಗ್ ಹಂತದಲ್ಲಿ, ಲೈಫ್‌ಸೈಕಲ್ ಮೆಥಡ್‌ಗಳಲ್ಲಿ ಮತ್ತು ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗಳಲ್ಲಿನ ದೋಷಗಳನ್ನು ಮಾತ್ರ ಹಿಡಿಯುತ್ತವೆ. ಅವು ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ದೋಷಗಳನ್ನು ಹಿಡಿಯುವುದಿಲ್ಲ:

• ಇವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು (ಕೆಳಗಿನ ವಿಭಾಗದಲ್ಲಿ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ)
• ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್ (ಉದಾಹರಣೆಗೆ, setTimeout ಅಥವಾ requestAnimationFrame ಕಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು)
• ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್
• ಎರರ್ ಬೌಂಡರಿಯಲ್ಲೇ ಎಸೆದ ದೋಷಗಳು (ಅದರ ಚೈಲ್ಡ್‌ಗಳಲ್ಲ)

ಎರರ್ ಬೌಂಡರಿಗಳು ಮತ್ತು ರಿಯಾಕ್ಟ್ ಹೂಕ್ಸ್: ಒಂದು ಶಕ್ತಿಯುತ ಸಂಯೋಜನೆ

ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಕ್ಲಾಸ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ರಿಯಾಕ್ಟ್ ಹೂಕ್ಸ್ ಹೆಚ್ಚು ಸಂಕ್ಷಿಪ್ತ ಮತ್ತು ಫಂಕ್ಷನಲ್ ವಿಧಾನವನ್ನು ನೀಡುತ್ತವೆ. ನಾವು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ useErrorBoundary ಹೂಕ್ ಅನ್ನು ರಚಿಸಬಹುದು, ಅದು ದೋಷ ನಿರ್ವಹಣೆಯ ಲಾಜಿಕ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ ಮತ್ತು ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷಗಳನ್ನು ಎಸೆಯಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯಲು ಅನುಕೂಲಕರ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಕಸ್ಟಮ್ useErrorBoundary ಹೂಕ್ ಅನ್ನು ರಚಿಸುವುದು

ಇಲ್ಲಿ useErrorBoundary ಹೂಕ್‌ನ ಒಂದು ಉದಾಹರಣೆ ಇದೆ:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• useState: ನಾವು ದೋಷದ ಸ್ಥಿತಿಯನ್ನು (error state) ನಿರ್ವಹಿಸಲು useState ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಆರಂಭದಲ್ಲಿ ದೋಷವನ್ನು null ಗೆ ಹೊಂದಿಸುತ್ತದೆ.
• useCallback: ನಾವು resetError ಮತ್ತು captureError ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಮೆಮೊಇಜ್ (memoize) ಮಾಡಲು useCallback ಅನ್ನು ಬಳಸುತ್ತೇವೆ. ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ಕೆಳಗೆ ಕಳುಹಿಸಿದರೆ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ಇದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ.
• ErrorBoundary ಕಾಂಪೊನೆಂಟ್: ಇದು useCallback ಜೊತೆಗೆ ರಚಿಸಲಾದ ಒಂದು ಫಂಕ್ಷನಲ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ, ಇದು children ಮತ್ತು ಐಚ್ಛಿಕ fallback ಪ್ರಾಪ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಸ್ಟೇಟ್‌ನಲ್ಲಿ ದೋಷವಿದ್ದರೆ, ಅದು ಒದಗಿಸಿದ fallback ಕಾಂಪೊನೆಂಟ್ ಅಥವಾ ಡೀಫಾಲ್ಟ್ ದೋಷ ಸಂದೇಶವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಅದು ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ನಮ್ಮ ಎರರ್ ಬೌಂಡರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ `[error]` ಯು `error` ಸ್ಟೇಟ್ ಬದಲಾದಾಗ ಅದು ಮರು-ರೆಂಡರ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• captureError ಫಂಕ್ಷನ್: ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ದೋಷದ ಸ್ಥಿತಿಯನ್ನು ಹೊಂದಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ರಿಸೋರ್ಸ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವಾಗ try...catch ಬ್ಲಾಕ್‌ನೊಳಗೆ ನೀವು ಇದನ್ನು ಕರೆಯುತ್ತೀರಿ.
• resetError ಫಂಕ್ಷನ್: ಈ ಫಂಕ್ಷನ್ ದೋಷದ ಸ್ಥಿತಿಯನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ, ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಚಿಲ್ಡ್ರನ್‌ಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ (ಸಂಭವನೀಯವಾಗಿ ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಮರು-ಪ್ರಯತ್ನಿಸುತ್ತದೆ).

ದೋಷ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

ಈಗ, ರಿಸೋರ್ಸ್ ಲೋಡಿಂಗ್ ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಲು ಈ ಹೂಕ್ ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನೋಡೋಣ. ಎಪಿಐನಿಂದ ಬಳಕೆದಾರರ ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry